<template>
	<view>
		<view style="height: 170rpx;">
			<view style="padding-left: 34rpx;padding-right: 32rpx;padding-top: 20rpx;">
				<view class="machineName">
					<text>{{assistant.nickname}}</text>
				</view>
				<view class="desc">
					<text>{{assistant.teachLevel}}</text>
				</view>
				<view class="desc">
					<text>{{assistant.price}}元/小时</text>
				</view>
			</view>
		</view>
		<view class="cut"></view>
		<view class="dates">
			<view :class="panduan1==index ? 'dateseled':'datesel' " v-for="(item, index) in selectdates" :key="index"
				@click="changeDate(item,$event,index)">
				<view :class="panduan1==index ? 'datetxt_selected':'datetxt' ">
					<text>{{item.dateFormat}}</text>
				</view>
				<view :class="panduan1==index ? 'wektxt_selected':'wektxt' ">
					<text>{{item.week}}</text>
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;padding-top: 20rpx;">
			<view
				style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;margin-bottom: 20rpx;">
				<text>套餐选择</text>
			</view>
			<view class="mealsels">
				<view :class="panduan==index ? 'mealsel_ed':'mealsel' " v-for="(item, index) in meals" :key="index"
					@click="changePrice(item,$event,index)">
					<view :class="panduan==index ? 'mealname_ed':'mealname' ">
						<text style="height: 84rpx;line-height: 84rpx;">{{item.mealName}}</text>
					</view>
<!-- 					<view :class="panduan==index ? 'mealprice_ed':'mealprice' ">
						<text style="font-size: 22rpx;">￥{{item.price}}</text>
					</view> -->
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;padding-top: 32rpx;">
			<view class="timesel">
				<text>时间选择</text>
			</view>
			<view style="display: flex;margin-top: 24rpx;">
				<view class="starttime">
					<e-picker :showValue="pickertime" mode="time" @change="change">
						<text class="kaishitime">开始时间</text>
						<text class="kaishi">{{startStr}}</text>
						<text class="iconfont icon-edit"
							style="color: #37b285;font-size: 28rpx;margin-left: 10rpx;"></text>
					</e-picker>
				</view>
				<view class="starttime" style="background: #F1F3F4;margin-left: 25rpx;">
					<text class="kaishitime">结束时间</text>
					<text class="kaishi" style="color: #555555;">{{endStr}}</text>
				</view>
			</view>
		</view>
		<view style="padding-left: 32rpx;padding-top: 32rpx;">
			<view class="timesel">
				<text>门店选择</text>
			</view>
			<view class="desc-cell" style="display: flex;margin-top: 24rpx;margin-bottom: 20rpx;margin-right: 20rpx;" @click="toSelectStore()">
				<view class="yt-list-cell">
					<input class="desc" type="text" v-model="store.name" disabled="" placeholder="请选择门店"
						placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<view class="cut"></view>
		<view class="mealdetail">
			<view style="display: flex;">
				<view
					style="width: 4rpx;height: 28rpx;background: #37b285;border-radius: 2rpx;line-height: 28rpx;margin-right: 10rpx;">
				</view>
				<view
					style="font-size: 28rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;line-height: 28rpx;">
					<text>预定须知</text>
				</view>
			</view>
			<view class="xuzhi">
				<text>我们仅提供场地及相应设备设施，使用人须遵守治安管</text>
				<text>理条例，违者由使用人自行承担相应责任及后果。</text></br>
				<text>
					1.严禁未成年人进入场所。
					2.严禁黄、赌、毒、打架斗殴等一切违法活动。
					3.使用人须自行对身体状况负责注意个人安全。
					4.破坏或带走本场所提供的设备设施请照价赔偿。
					5.请自行保管好私人物品，如有遗失概不负责。
				</text>
			</view>
		</view>
		<view style="height: 108rpx;"></view>
		<view class="commit">
			<view style="width: 475rpx;position: relative;">
				<view style="padding-left: 31rpx;">
					<text
						style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #1A1A1A;">总计</text>
					<text
						style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #EA4A33;">￥</text>
					<text
						style="font-size: 40rpx;font-family: Source Han Sans CN;font-weight: 400;color: #EA4A33;">{{price}}</text>
				</view>
				<view style="line-height: 17rpx;padding-left: 31rpx;">
					<text style="font-size: 20rpx;font-family: Source Han Sans CN;font-weight: 400;color: #9A9A9A;">
						已选{{duration}}小时
					</text>
				</view>

			</view>
			<view style="display: flex;justify-content: center;align-items: center;" @click="buyAssistant()">
				<view class="submit">
					<text class="iconfont icon-reservation"
						style="color: #FFFFFF;font-size: 34rpx;margin-right: 10rpx;"></text>
					<text>立即预定</text>
				</view>
			</view>
		</view>
		<uni-popup ref="tishi" :mask-click="true" type="center">
			<view class="unipopup">
				<view style="width: 100%;text-align: center;padding-top: 20rpx;">
					<text class="successtxt">预约信息确认</text>
				</view>
				<view class="info">
					<view class="yuyueinfo"><text>预约门店:{{store.name}}</text></view>
					<view class="yuyueinfo"><text>预约助教:{{assistant.nickname}}</text></view>
					<view class="yuyueinfo"><text>开始时间:{{selectdate}} {{startStr}}</text></view>
					<view class="yuyueinfo"><text>结束时间:{{selectdate}} {{endStr}}</text></view>
				</view>
				<view class="xuzhipopup">
					<view class="xuzhititle">
						<text>预定须知:</text>
					</view>
					<view class="xuzhitxt">
						<text>1.预定的订单将全时段保留，迟到不可顺延和退款。</text>
					</view>
					<view class="xuzhitxt">
						<text>2.若订单时段前包厢无人使用，可以提前开始订单，但是订单总时长不变。</text>
					</view>
					<view class="xuzhitxt">
						<text>3.订单开始以后不可取消和退款，请合理规划您的时间。</text>
					</view>
					<view class="xuzhitxt">
						<text>4.预定表示对以上信息须知的认可。</text>
					</view>
				</view>
				<view style="display: flex;margin-top: 30rpx;">
					<view class="buttomupdate" @click="closeTishi()"><text>返回修改</text></view>
					<view class="buttomafrim" @click="submit()"><text>立即预定</text></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import ePicker from '@/components/e-picker/e-picker.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	const {
		dateTimePicker,
		getMonthDay
	} = require('@/components/date.js');
	export default {
		components: {
			ePicker
		},
		data() {
			return {
				assistantId:null,
				assistant:{},
				selectdates: [],
				selectdate: '',
				pickertime: '',
				timeStr: '',
				startStr: '',
				endStr: '',
				panduan1: 0,
				panduan: 0,
				duration: 0,
				price:0,
				stores: [],
				store: null,
				meals:[{"mealName":"1小时","duration":1},{"mealName":"2小时","duration":2},{"mealName":"3小时","duration":3},{"mealName":"4小时","duration":4}],
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
            let that = this;
			that.getDates();
			that.initTime();
			that.assistantId = options.id;
			that.getAssistantById(that.assistantId);
		},
		onShow() {
			let that = this;
			uni.$on('store', function(data) {
				that.store = data;
				console.log("=========" + JSON.stringify(that.store));
			})
		},
		filters: {
			formatStatus(status) {
				
			}
		},
		methods: {
			toSelectStore() {
				uni.navigateTo({
					url: '/pages/store/storeList?type=assistant'
				})
			},
			dateFormat(date) {
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				return year + "/" + month + "/" + day + " " + hours + ":" + minutes;
			},
			dateFormattime(date) {
				let year = date.getFullYear();
				// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
				let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
				let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
				let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
				let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
				let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				// 拼接
				// return year + "/" + month + "/" + day + " " + hours + ":" + minutes;
				return hours + ":" + minutes;
			},
			initTime(){
				let that = this;
				that.timeStr = that.dateFormat(new Date());
				that.startStr = that.dateFormattime(new Date(that.timeStr));
				that.duration = that.meals[0].duration;
				that.endTime = that.addDays(that.timeStr, that.duration);
				that.endStr = that.dateFormattime(new Date(that.endTime));
				that.pickertime = that.startStr + ':00';
			},
			change(e) {
				this.pickertime = e;
				let time = e;
				time = time.substr(0, 5);
				this.selectdate = this.selectdates[this.panduan1].date;
				this.timeStr = this.selectdate + ' ' + time;
				console.log("timeStr=====" + this.timeStr);
				this.startStr = this.dateFormattime(new Date(this.timeStr));
				console.log("startStr=====" + this.startStr);
				let duration = this.duration;
				this.endTime = this.addDays(this.timeStr, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
			},
			changeDate(item, e, index) {
				this.panduan1 = index;
				this.selectdate = this.selectdates[index].date;
				if (index == 0) {
					this.timeStr = this.dateFormat(new Date());
					this.startStr = this.dateFormattime(new Date(this.timeStr));
					this.pickertime = this.startStr + ':00'
				} else {
					this.pickertime = '00:00:00'
				}
				let time = this.pickertime;
				time = time.substr(0, 5);
				this.timeStr = this.selectdate + ' ' + time;
				this.startStr = this.dateFormattime(new Date(this.timeStr));
				let duration = this.duration;
				this.endTime = this.addDays(this.timeStr, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
			},
			changePrice(item, e, index) {
				let i = new Date(this.timeStr).getTime();
				let j = new Date().getTime()
				if ((j - i) > 6000) {
					this.timeStr = this.dateFormat(new Date());
				}
				this.panduan = index
				let duration = item.duration;
				this.duration = duration;
				this.startStr = this.dateFormattime(new Date(this.timeStr));
				this.endTime = this.addDays(this.timeStr, duration);
				this.endStr = this.dateFormattime(new Date(this.endTime))
				this.price = this.assistant.price*this.duration;
			},
			async getAssistantById() {
				let that = this;
				let params = {
					"id": that.assistantId
				};
				let result = await Api.apiCall('get', Api.qsg.getAssistantById, params);
				if (result) {
					console.log(result)
					that.assistant = result;
					that.price = that.assistant.price*that.duration;
				}
			},
			async getDates() {
				let that = this;
				let params = {
				};
				let result = await Api.apiCall('get', Api.qsg.getDates, params);
				if (result) {
					console.log(result)
					that.selectdates = result;
				    that.selectdate = that.selectdates[that.panduan1].date;
				}
			},
			async buyAssistant() {
				if (!this.hasLogin) {
					uni.showModal({
						title: '提示',
						content: '请先授权登录后下单.',
						success: function(res) {
							if (res.confirm) {
								uni.redirectTo({
									url: '/pages/public/login'
								});
							} else if (res.cancel) {
							}
						}
					});
					return false;
				}
				let that = this;
				if (that.store == null) {
					uni.showToast({
						icon: "error",
						title: '请选择门店'
					})
					return false;
				}
				if (that.timeStr == '' || that.endTime == '') {
					uni.showToast({
						icon: "error",
						title: '请选择套餐'
					})
					return false;
				}
				that.confirm();
			},
			async submit(){
				let that = this;
				let params = {
					assistantId: that.assistant.id,
					assistantName: that.assistant.nickname,
					storeId: that.store.id,
					storeName: that.store.name,
					startTime: that.timeStr,
					endTime: that.endTime,
					price: that.price,
				};
				let data = await Api.apiCall('post', Api.order.createAssistantOrder, params);
				console.log(data);
				if (data) {
					that.weixinPay(data.id);
				}
			},
			async weixinPay(orderId){
				let params = {
					'orderId': orderId,
				};
				let res = await Api.apiCall('post', Api.order.weixinAppletPayForAssistant, params);
				console.log(res);
				if (res) {
					uni.requestPayment({
						timeStamp: res.timeStamp,
						nonceStr: res.nonceStr,
						package: res.package,
						signType: res.signType,
						paySign: res.paySign,
						success(datas) {
							console.log(datas);
							uni.redirectTo({
								url: '/pages/money/paySuccess?type=zj'
							})
						},
						fail(err) {
							fail(JSON.stringify(err))
						}
					});
				
				}
			},
			confirm() {
				this.$refs.tishi.open('center')
			},
			closeTishi() {
				this.$refs.tishi.close()
			},
			addDays(date, duration) {
				var nd = new Date(date);
				nd = nd.valueOf();
				nd = nd + duration * 60 * 60 * 1000;
				nd = new Date(nd);
				//alert(nd.getFullYear() + "年" + (nd.getMonth() + 1) + "月" + nd.getDate() + "日");
				var y = nd.getFullYear();
				var m = nd.getMonth() + 1;
				var d = nd.getDate();
				if (m <= 9) m = "0" + m;
				if (d <= 9) d = "0" + d;
				var hours = nd.getHours() < 10 ? "0" + nd.getHours() : nd.getHours();
				var minutes = nd.getMinutes() < 10 ? "0" + nd.getMinutes() : nd.getMinutes();
				var seconds = nd.getSeconds() < 10 ? "0" + nd.getSeconds() : nd.getSeconds();
				return y + "/" + m + "/" + d + " " + hours + ":" + minutes;;
			},
		}
	}
</script>

<style lang="scss">
	.timesel {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #1A1A1A;
	}

	.drug-list {
		width: 750rpx;
		height: auto;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-top: 30rpx;
		font-size: 30rpx;
		color: #333333;
		line-height: 44rpx;
	}

	.drug-listtext {
		font-weight: bold;
	}

	.drugtext {
		width: 690rpx;
		height: auto;
		font-size: 28rpx;
		line-height: 38rpx;
		color: #666666;
		margin-bottom: 30rpx;
		/* text-indent: 2em; */
	}

	.cut {
		height: 10rpx;
		background-color: #F7F7F7;
		margin-top: 10rpx;
	}

	.commit {
		width: 750rpx;
		height: 108rpx;
		background: #FFFFFF;
		color: #3d3d3d;
		bottom: 0;
		display: flex;
		position: fixed;
		box-shadow: 0 0 10px #e6e6e6;
	}

	.carousel {
		width: 686rpx;
		height: 320rpx;
		margin-left: 32rpx;

		image {
			width: 100%;
			height: 100%;
			background: #493D3E;
			border-radius: 24rpx;
			margin-top: 10rpx;
		}

		.carousel-item {
			width: 100%;
			height: 100%;
			// padding: 0 28upx;
			overflow: hidden;
		}
	}

	.topimage {
		width: 686rpx;
		height: 320rpx;
		margin-left: 32rpx;
	}

	.topimage image {
		width: 100%;
		height: 100%;
		background: #493D3E;
		border-radius: 24rpx;
		margin-top: 10rpx;
	}

	.drug-explain {
		flex: 1;
		font-size: 28rpx;
		text-align: left;
		color: #666666;
		line-height: 52rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.colum {
		width: 95%;
		height: 70rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d;
		border-radius: 8rpx;
		display: flex;
		margin-bottom: 15rpx;
	}

	.yuyueinfo {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
		letter-spacing: 2rpx;
	}

	.datesel {
		width: 160rpx;
		height: 84rpx;
		background: #F1F3F4;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		margin-right: 15rpx;
		display: inline-block;
	}

	.dateseled {
		width: 160rpx;
		height: 84rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 16rpx;
		margin-right: 15rpx;
		display: inline-block;
	}

	.datetxt {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;
		text-align: center;
	}

	.datetxt_selected {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		line-height: 42rpx;
		text-align: center;
	}

	.xuzhipopup {
		height: auto;
		width: 100%;
		padding-left: 22rpx;
	}

	.xuzhititle {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 600;
		color: #ff0004;
	}

	.colum-selected {
		width: 95%;
		height: 70rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d;
		background-color: #55aaff;
		border-radius: 8rpx;
		display: flex;
		margin-bottom: 15rpx;

		view {
			color: #ffffff;
		}
	}

	.drug-explain1 {
		flex: 1;
		font-size: 34rpx;
		text-align: left;
		font-weight: 900;
		color: #29936d;
		line-height: 52rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.wektxt {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
		text-align: center;
	}

	.wektxt_selected {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		text-align: center;
	}

	.drugtxt {
		display: flex;
		width: 690rpx;
		height: 250rpx;
		padding-top: 25rpx;
		padding-left: 25rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
	}

	.buttomopendoor1 {
		width: 400rpx;
		height: 80rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		line-height: 80rpx;
		text-align: center;
		margin-top: 60rpx;
	}

	.buttomopendoor2 {
		width: 400rpx;
		height: 80rpx;
		background: #37b285;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-top: 24rpx;
	}

	.drugexplain {
		width: 440rpx;
		height: 200rpx;
		margin-left: 30rpx;
		display: flex;
		flex-direction: column;
	}

	.drugimg {
		width: 190rpx;
		height: 190rpx;
	}

	.machineName {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}

	.submit {
		width: 220rpx;
		height: 80rpx;
		background: #37b285;
		border-radius: 40rpx;
		font-size: 29rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
		line-height: 80rpx;
		margin-top: 13rpx;
		padding-right: 4rpx;
	}

	.mealsels {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		height: auto;
	}

	.chongzhi {
		width: 168rpx;
		height: 72rpx;
		position: absolute;

		image {
			height: 100%;
			width: 100%;
		}

		left: 550rpx;
		top: 140rpx;
	}

	.mealsel {
		width: 168rpx;
		height: 84rpx;
		background: #F1F3F4;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		text-align: center;
		margin-right: 11rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		margin-top: 11rpx;
	}

	.mealsel_ed {
		width: 168rpx;
		height: 84rpx;
		background: #37b285;
		border: 1px solid #C2C2CC;
		border-radius: 16rpx;
		text-align: center;
		margin-right: 11rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		-o-text-overflow: ellipsis;
		margin-top: 11rpx;
	}

	.unipopup {
		height: 820rpx;
		width: 580rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
	}

	.hexiao {
		height: 450rpx;
		width: 520rpx;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.timejindu {
		font-size: 16rpx;
		font-family: ProductSans;
		font-weight: 400;
		color: #9A9A9A;
		text-align: left;
		padding-left: 32rpx;
	}

	.mealname {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #333333;
	}

	.dates {
		padding-left: 32rpx;
		padding-top: 28rpx;
		width: 750rpx;
		height: 90prx;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
	}

	.tuangoutitle {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #909090;
		line-height: 100rpx;
		margin-left: 6rpx;
		float: left;
	}

	.tuangoutxt {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		line-height: 100rpx;
		margin-left: 18rpx;
		float: right;
	}

	.tuangouicon {
		position: absolute;
		right: 60rpx;
		padding-top: 23rpx;
		color: #37b285;

	}

	.mealname_ed {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ffffff;
	}

	.mealprice {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #9A9A9A;
	}

	.mealprice_ed {
		font-size: 20rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
	}

	.selectmeal {
		height: 80rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #29936d;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 18rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d
	}

	.selecttime {
		height: 80rpx;
		background-color: #ffffff;
		font-size: 34rpx;
		color: #29936d;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
		letter-spacing: 18rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d
	}

	.successtxt {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}

	.desc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.drugimg image {
		width: 190rpx;
		height: 190rpx;
	}

	.jindu {
		width: 686rpx;
		height: auto;
		background: #FFFFFF;
		border: 1px solid #E8E8E8;
		border-radius: 24rpx;
		line-height: 220rpx;
		font-weight: 600;
		font-size: 30rpx;
		text-align: center;
		box-shadow: 0 0 10px #b4cec0;
	}

	.moshi {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #1A1A1A;
		text-align: center;
		line-height: 88rpx;
		border-bottom-style: solid;
		border-bottom-color: #d4d4d4;
		border-bottom-width: 1rpx;
	}

	.mealdetail {
		height: auto;
		padding-left: 32rpx;
		padding-top: 29rpx;
	}

	.zhifutuan {
		margin-left: 32rpx;
		margin-top: 30rpx;
		padding-left: 32rpx;
		width: 686rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #E8E8E8;
		border-radius: 24rpx;
		font-weight: 600;


	}

	.status {
		height: 60rpx;
		width: 130rpx;
		background-color: #ffffff;
		border-radius: 4rpx;
		color: #b0b0b0;
		font-weight: 600;
		line-height: 60rpx;
		text-align: center;
		font-size: 30rpx;
		letter-spacing: 1rpx;
		margin-top: 70rpx;
		margin-left: 20rpx;
		border-style: solid;
		border-width: 1rpx;
		border-color: #b0b0b0;
	}

	.currentOrder {
		color: #6c6c6c;
		font-weight: 400;
		height: 60rpx;
		line-height: 60rpx;
		padding-left: 10rpx;
	}

	.info {
		height: 230rpx;
		width: 100%;
		padding-top: 10rpx;
		padding-left: 22rpx;
	}

	.buttomafrim {
		width: 200rpx;
		height: 80rpx;
		background: #37b285;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin-left: 20rpx;
	}

	.tuangou {
		width: 600rpx;
		height: 100rpx;


	}

	.buttomupdate {
		width: 200rpx;
		height: 80rpx;
		background: #E3F6E4;
		border: 1px solid #B8E6BA;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #37b285;
		;
		line-height: 80rpx;
		text-align: center;
		margin-left: 80rpx;
	}

	.mealinfo {
		// overflow: auto;
		padding-left: 34rpx;
		background-color: #ebebeb;
		padding-top: 15rpx;
		height: auto;
	}

	.xuzhitxt {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #ff0004;
	}

	.hexiaoimg {
		width: 190rpx;
		height: 100rpx;
	}

	.xuzhi {
		width: 600rpx;
		font-size: 26rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #666666;
		padding-top: 10rpx;
		position: relative;
	}

	.drugtit {
		width: 690rpx;
		height: 86rpx;
		font-size: 32rpx;
		line-height: 86rpx;
		color: #333333;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-weight: bold;
	}

	.drugcontent {
		width: 750rpx;
		height: auto;
		padding-top: 30rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		box-sizing: border-box;
		background-color: #29936d;
	}

	.coulumdetail {
		flex: 1;
		text-align: center;
		background-color: #ffffff;
		color: #29936d;
		letter-spacing: 2rpx;
		line-height: 66rpx;
	}

	.coulumdetail-selected {
		flex: 1;
		text-align: center;
		background-color: #29936d;
		color: #29936d;
		letter-spacing: 2rpx;
		line-height: 66rpx;
	}

	.page-bottom {
		position: fixed;
		left: 30upx;
		bottom: 30upx;
		z-index: 95;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690upx;
		height: 100upx;
		background: rgba(255, 255, 255, 0.9);
		box-shadow: 0 0 20upx 0 rgba(0, 0, 0, 0.5);
		border-radius: 16upx;

		.p-b-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: $font-sm;
			color: $font-color-base;
			width: 96upx;
			height: 80upx;

			.yticon {
				font-size: 40upx;
				line-height: 48upx;
				color: $font-color-light;
			}

			&.active,
			&.active .yticon {
				color: $uni-color-primary;
			}

			.icon-fenxiang2 {
				font-size: 42upx;
				transform: translateY(-2upx);
			}

			.icon-shoucang {
				font-size: 46upx;
			}
		}

		.action-btn-group {
			display: flex;
			height: 76upx;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0 20upx 40upx -16upx #fa436a;
			box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
			background: linear-gradient(to right, #ffac30, #fa436a, #f56c6c);
			position: relative;
		}
	}

	.meal-content {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: center;

		.meal-item {
			// flex: 1;
			// margin-left: 10rpx;
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			border-style: solid;
			border-width: 1rpx;
			border-color: #29936d;
			color: #29936d;
		}

		.mealItem {
			// flex: 1;
			// margin-left: 10rpx;
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			background-color: #29936d;
			color: #fffff
		}

		.meal-item-selected {
			font-size: 22rpx;
			height: 120rpx;
			line-height: 120rpx;
			width: 120rpx;
			background-color: #29936d;
			color: #ffffff;
		}

		.meal-item2 {
			font-size: 24rpx;
			color: #FFFFFF;
			height: 60rpx;
			line-height: 60rpx;
			width: 500rpx;
			background-color: #29936d;
			border-radius: 15rpx;
		}
	}

	.starttime {
		width: 331rpx;
		height: 72rpx;
		background: #FFFFFF;
		border: 1px solid #C2C2CC;
		border-radius: 36rpx;
		line-height: 72rpx;
		padding-left: 28rpx;
	}

	.kaishitime {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}

	.kaishi {
		font-size: 30rpx;
		font-family: ProductSans;
		font-weight: bold;
		color: #37b285;
		margin-left: 70rpx;
	}

	.time-content {
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		.start-time {
			padding-left: 60rpx;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.sel-starttime {
			width: 600rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			border-style: solid;
			border-width: 1rpx;
			border-color: #29936d;
			border-radius: 12rpx;
			text-align: center;
			color: #29936d;
			letter-spacing: 2rpx;
		}

		.end-time {
			padding-left: 60rpx;
			margin-top: 20rpx;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			font-size: 24rpx;
		}
	}

	.typeName {
		font-weight: 900;
		font-size: 30rpx;
		color: #29936d;
		letter-spacing: 3rpx;
		margin-top: 20rpx;
	}

	.meal-desc-content {
		border-style: solid;
		border-width: 1rpx;
		border-color: #29936d;
		border-radius: 10rpx;

		.meal-desc-title {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
			background-color: #29936d;
			border-radius: 9rpx;
			color: #ffffff;

		}

		.meal-desc {
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			text-align: center;
		}
	}
	
	.desc-cell{
		border: 1rpx solid #C0C0C0;
		padding: 5rpx;
		border-radius: 10rpx;
	}
</style>
